import React, { PureComponent,lazy } from 'react'
// 导入路由
import { Route } from 'react-router-dom'
// 导入 TabBar
import { TabBar } from 'antd-mobile'
import './index.less';
// 导入TabBar菜单的组件
import Index from '../Index'

const News = lazy(() => import('../News'))
const HouseList = lazy(() => import('../HouseList'))
const Profile = lazy(() => import('../Profile'))

const tabbars = [
  {
    title: "首页",
    route: "/home",
    icon: "iconfont icon-ind",
    selectedicon: "iconfont icon-ind",
    badge: "",
    dot: false,
  },
  {
    title: "找房",
    route: "/home/houselist",
    icon: "iconfont icon-findHouse",
    selectedicon: "iconfont icon-findHouse",
    badge: "",
    dot: false,
  },
  {
    title: "资讯",
    route: "/home/news",
    icon: "iconfont icon-infom",
    selectedicon: "iconfont icon-infom",
    badge: "",
    dot: false,
  },
  {
    title: "我的",
    route: "/home/profile",
    icon: "iconfont icon-my",
    selectedicon: "iconfont icon-my",
    badge: "",
    dot: false,
  },
];
export default class Home extends PureComponent {
  state = {
    selectedTab: this.props.location.pathname === "/" ? "/home" : this.props.location.pathname,
  };

  componentDidUpdate(prevProps) {
    // console.log('prevProps: ', prevProps);
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

  render() {
    return (
      <div className="home">
        <Route exact path="/home" component={Index} />
        <Route path="/home/news" component={News} />
        <Route path="/home/houselist" component={HouseList} />
        <Route path="/home/profile" component={Profile} />

        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          noRenderContent
        >
          {
            tabbars.map(v => {
              return <TabBar.Item
                title={v.title}
                key={v.route}
                icon={
                  <i className={v.icon}></i>
                }
                selectedIcon={
                  <i className={v.selectedicon}></i>
                }
                selected={this.state.selectedTab === v.route}
                badge={v.badge}
                dot={v.dot}
                onPress={() => {
                  this.setState({
                    selectedTab: v.route,
                  });
                  // 路由切换
                  // console.log(this.props);
                  this.props.history.push(v.route);
                }}
              >
              </TabBar.Item>
            })
          }
        </TabBar>
      </div>
    )
  }
}
